<template>
  <main class="h-full w-full px-[50px]">
    <header class="w-full flex items-center justify-center pt-[62px]">
      <div class="rounded-tl-[30px] rounded-br-[30px] s">
        <img :src="LOGO" class="w-[77px] h-[77px]" />
      </div>
    </header>
    <section class="mt-[49px]">
      <var-input placeholder="请输入账号" v-model="username" clearable>
        <template #prepend-icon>
          <var-icon name="card-account-details-outline" />
        </template>
      </var-input>

      <var-input
        placeholder="请输入密码"
        v-model="password"
        type="password"
        clearable
        class="mt-[34px]"
      >
        <template #prepend-icon>
          <var-icon :name="PASSWORDICON" />
        </template>
      </var-input>
    </section>
    <footer class="mt-[45px]">
      <var-button
        color="linear-gradient(to right, #0baae6, #63d2fb,#0baae6)"
        text-color="#fff"
        :block="true"
        :loading="loading"
        @click="login"
      >
        登录
      </var-button>
      <div class="text-right mt-[10px] text-gray-500 text-[14px]">
        <span @click="forget"> 忘记密码？ </span>
      </div>
    </footer>
  </main>
</template>

<script setup lang="ts">
  import LOGO from '@/assets/images/LOGO.png';
  import PASSWORDICON from '@/assets/icon/login_input_password.png';
  import { Snackbar } from '@varlet/ui';
  import { useLogin } from '@/api/user';
  import { UserInfo } from '@/utils/interface';
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';

  let username = ref();
  let password = ref('');
  let loading = ref(false);

  const forget = () => {
    Snackbar['warning']('请联系老师');
  };
  const router = useRouter();
  const login = async () => {
    if (!username.value) {
      Snackbar['warning']('请输入账号');
      return;
    }
    if (!password.value) {
      Snackbar['warning']('请输入密码');
      return;
    }
    loading.value = true;
    try {
      const { data, status } = await useLogin({
        id_card: username.value,
        password: password.value,
      });
      if (status === 200) {
        Snackbar['success']('登录成功');
        const { class_name, key, major_name, username } = data as UserInfo;
        const userStore = useUserInfoStoreWithOut();
        userStore.setUserInfo({
          class_name,
          key,
          major_name,
          username,
        });
        router.replace('/home');
      }
      loading.value = false;
    } catch {
      loading.value = false;
    }
  };
</script>

<style scoped>
  :deep(.var-input__icon) {
    @apply mr-[10px];
  }
  :deep(.var-button) {
    @apply rounded-[30px];
  }
  :deep(.var-input__icon) {
    @apply text-[#d2d2d2];
  }
  .s {
    box-shadow: 3.5px -0.5px 11px 3.5px rgba(11, 169, 229, 0.23);
  }
</style>
